<template>
	<view>
		<view v-if="isLogin">
			<index v-if="PageCur=='index'"></index>
			<user v-if="PageCur=='user'"></user>
			<view class="cu-bar tabbar bg-white shadow foot">
				<view class="action" @click="NavChange" data-cur="index">
					<view class='cuIcon-cu-image'>
						<image :src="'/static/tabbar/home' + [PageCur=='index'?'_cur':''] + '.png'"></image>
					</view>
					<view :class="PageCur=='index'?'text-theme':'text-gray'">首页</view>
				</view>
				<view class="action" @click="NavChange" data-cur="user">
					<view class='cuIcon-cu-image'>
						<image :src="'/static/tabbar/mine' + [PageCur == 'user'?'_cur':''] + '.png'"></image>
					</view>
					<view :class="PageCur=='user'?'text-theme':'text-gray'">我的</view>
				</view>
			</view>
		</view>
		
		
		
		<view class="login_bg bg-white" v-if="!isLogin&&!waitting">
			<view style="padding-top: 200rpx;">
				<view class="text-center">
					<image class="logo" src="../../static/logo.png" mode=""></image>
				</view>
				<view class="">
					<view class="text-center">账号登录</view>
					<view class="login_box">
						<form @submit="loginPost">
							<view class="cu-form-group margin-top">
								<view class="title"><text class='cuIcon-my text-theme'></text></view>
								<input placeholder="请输入账号" name="account"></input>
							</view>
							<view class="cu-form-group">
								<view class="title"><text class='cuIcon-lock text-theme'></text></view>
								<input placeholder="请输入密码" name="password" type="password"></input>
								
							</view>
							
							<button class="cu-btn block bg-theme margin-tb-sm lg" form-type="submit">登录</button>
								
							
						</form>
					</view>
						
				</view>
				<view class="">
					<view class="text-center text-gray padding">快速登录</view>
					<view class="solid-bottom"></view>
					<view class="cu-list grid col-1 no-border">
						<view class="cu-item" @click="showlogin">
							<view class="cuIcon-weixin text-green lg">
								<!-- <text class=""></text> -->
							</view>
							<view class="">
								微信登录
							</view>
						</view>
						
					</view>
				</view>
			</view>
			
			<view class="cu-modal" :class="showwxlogin&&!waitting?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">微信登录</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						使用微信快速登录需要获取您的昵称头像，在接下来的授权中请点击允许
					</view>
					<view class="cu-bar bg-white">
						
						<view class="action margin-0 flex-sub  " @tap="hideModal">取消</view>
						<view class="action margin-0 flex-sub text-green solid-left bg-green radius">
							<button class="cu-btn block bg-blue lg" style="width: 100%;" type="primary" open-type="getUserInfo" @getuserinfo="wxlogin">好的</button> 
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="waitting bg-theme " v-if="waitting">
			<view class="text-white text-xxl text-bold text-center" style="line-height: 100vh;">
				waitting...
			</view>
			<!-- <image src="https://image.weilanwl.com/gif/loading-black.gif" mode="aspectFit" class="gif-black response" style="height:240upx"></image> -->
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
		return {
				PageCur: 'index',
				isLogin:false,
				showwxlogin:false,
				waitting:true
			}
		},
		onLoad() {
			console.log('index onload')
			
			this.$fire.on('newuser',(data)=>{
				console.log(data)
				this.isLogin = false
				this.waitting = false
			})
			this.$fire.on('logged',(data)=>{
				console.log(data)
				this.isLogin = true
				this.waitting = false
			})
			var userinfo = uni.getStorageSync('userinfo')
			if(userinfo){
				this.getuserinfo()
			}else{
				this.autologin()
			}
		},
		methods: {
			//自动登录
			autologin(){
				console.log('auto login')
				this.util.login('weixin')
			},
			getuserinfo(){
				this.util.csAjax('/addons/open/wxapp.user/index',{},(ret)=>{
					uni.setStorageSync('userinfo',ret.data)
					this.isLogin = true
					this.waitting = false
				})
			},
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			},
			showlogin(){
				this.showwxlogin = true
				
			},
			hideModal(){
				this.showwxlogin = false
			},
			wxlogin(e){
				this.showwxlogin = false
				console.log(e)
				if(e.detail.userInfo){
					var that = this
					uni.login({
						provider: 'weixin',
						success:  (loginRes)=>{
							console.log(JSON.stringify(loginRes));
							
							
							var data  ={
								code:loginRes.code,
								rawData: e.detail.rawData,
							}
							
							
							// 首次用户登陆
							that.util.csAjax('/addons/open/wxapp.user/wxAuthLogin',data,(ret)=>{
								console.log(ret)
								if(~~ret.code==1){
									uni.setStorageSync('userinfo',ret.data.userInfo)
									that.$fire.fire('logged',{data:ret.data});
									uni.navigateBack({})
								}
							},'登录中。。')
							
						}
					});
				}else{
					this.$api.msg("您拒绝了授权无法快速登录")
				}
			},
			loginPost(e){
				var data = e.detail.value
				this.util.csAjax('/addons/open/wxapp.user/login',data,(ret)=>{
					console.log(ret)
					this.$api.msg(ret.msg);
					uni.setStorageSync('userinfo',ret.data)
					this.$fire.fire('logged',{data:ret.data});
				},'Logging')
			}
			
		}
	}
</script>

<style>
	.page{
		position: relative;
	}
	.logo{
		width: 200rpx;
		height: 200rpx;
		/* border-radius: 50%; */
		margin: 0 auto;
	}
	.login_bg{
		height: 100vh;
		
	}
	.login_box{
		width: 500rpx;
		margin: 0 auto;
	}
		
	.waitting{
		width: 100%;
		height: 100vh;
		
	}
</style>
